// 覆盖webpack功能
const path = require('path')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 配置通过CDN引入的js/css
const cdn = {
    // 忽略打包的第三方库
    /**
     * externals 对象属性解析：
     * '包名' : '在项目中引入的名字'
     * 以element-ui举例 我再main.js里是以
     * import ELEMENT from 'element-ui'
     * Vue.use(ELEMENT, { size: 'small' })
     * 这样引入的，所以我的externals的属性值应该是ELEMENT
     */
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
        'element-ui': 'ELEMENT',
        dayjs: 'dayjs',
        moment: 'moment'
    },
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js',
        'https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.3/dayjs.min.js',
        'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
    ],
    css: [
        'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css'
    ]
}
module.exports = {
    productionSourceMap: false,
    lintOnSave: false,
    devServer: {
        open: true,
        proxy: {
            '/api': {
                // target: 'http://39.99.186.36',
                target: 'http://localhost:3000',
                changeOrigin: true, // 允许跨域
                ws: true, //websocket
                pathRewrite: {
                    '^/api': ''  // 重写路径
                }
            }
        }
    },
    // 提取css代码到单文件
    css: {
        extract: true, // 使用css分离
        sourceMap: false // 不生成map文件
    },
    // 配置路径别名 第一种
    chainWebpack: (config) => {
        config.resolve.alias.set('@', path.resolve(__dirname, './src'))
        if (process.env.NODE_ENV !== 'development') {
            config.plugin('html').tap((args) => {
                args[0].cdn = cdn
                return args
            })

            config
                .plugin('html')
                .tap(args => {
                    args[0].title = 'PC音乐'
                    return args
            })

        /*    // 图片压缩
            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({bypassOnDebug: true})
                .end()
*/
            // 压缩代码
            config.optimization.minimize(true)
            // 分割代码,相应的文件中存入分割后的代码
            config.optimization.splitChunks({
                chunks: 'all'
            })
            config.output.filename('js/[name].[hash:8].js').end()
            config.output.chunkFilename('js/[name].[hash:8].js').end()
        }

    },
    configureWebpack: config => {
        // 配置不打包的模块
        config.externals = process.env.NODE_ENV !== 'development' ? cdn.externals : {}
        // 生产环境相关配置
        if (process.env.NODE_ENV !== 'development') {
            // 代码压缩
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生产环境自动删除console
                        compress: {
                            // warnings: false, // 若打包错误，则注释这行
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            )
        }
    }
}

